import 'package:flutter/material.dart';
import 'package:flutter_provider_demo/config/dimens.dart';
import 'package:flutter_provider_demo/ui/logout/logout_button.dart';
import 'package:flutter_provider_demo/ui/logout/logout_viewmodel.dart';
import 'package:flutter_provider_demo/ui/profile/profile_viewmodel.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class ProfileDrawer extends StatelessWidget {
  const ProfileDrawer({super.key, required this.viewModel});
  final ProfileViewModel viewModel;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.7,
      color: Theme.of(context).colorScheme.secondaryContainer,
      child: ListenableBuilder(
        listenable: viewModel,
        builder: (context, _) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              DrawerHeader(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    _buildUserInfo(context),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: Dimens.smallPaddinghorizontal),
                child: _buildDartMode(context),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: Dimens.smallPaddinghorizontal, vertical: 8.0),
                child: _buildLanguage(context),
              ),
              Expanded(child: SizedBox()),
              viewModel.user == null
                  ? Padding(
                      padding: const EdgeInsets.fromLTRB(12.0, 28.0, 12.0, 32.0),
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Theme.of(context).colorScheme.secondary,
                          foregroundColor: Theme.of(context).colorScheme.onSecondary,
                        ),
                        onPressed: () => context.push("/login"),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            const Icon(Icons.login),
                            const SizedBox(width: 8),
                            Text(
                              AppLocalizations.of(context)!.login,
                              style: Theme.of(context).textTheme.titleLarge,
                            ),
                          ],
                        ),
                      ),
                    )
                  : Padding(
                      padding: const EdgeInsets.fromLTRB(12.0, 28.0, 12.0, 32.0),
                      child: LogoutButton(
                        viewModel: LogoutViewModel(authRepository: context.read()),
                        onLogoutSuccess: viewModel.logout,
                      ),
                    ),
            ],
          );
        },
      ),
    );
  }

  Widget _buildLanguage(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(AppLocalizations.of(context)!.language, style: Theme.of(context).textTheme.titleLarge),
        DropdownButton<String>(
          isDense: true,
          underline: Container(),
          value: viewModel.settingsModel.language,
          items: viewModel.languages.map((e) {
            return DropdownMenuItem<String>(
              value: e,
              child: Text(
                e,
                style: Theme.of(context).textTheme.titleLarge!.copyWith(color: Theme.of(context).colorScheme.onSurface),
              ),
            );
          }).toList(),
          onChanged: (value) => viewModel.changeLanguage(value),
        ),
      ],
    );
  }

  Widget _buildDartMode(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          AppLocalizations.of(context)!.dark_mode,
          style: Theme.of(context).textTheme.titleLarge,
        ),
        Transform.scale(
          scale: 0.8,
          child: Switch(
            value: viewModel.settingsModel.themeMode == ThemeMode.dark,
            trackColor: WidgetStateProperty<Color?>.fromMap(
              <WidgetStatesConstraint, Color>{
                WidgetState.selected: Theme.of(context).colorScheme.secondary,
              },
            ),
            thumbColor: WidgetStateProperty<Color?>.fromMap(
              <WidgetStatesConstraint, Color>{
                WidgetState.selected: Theme.of(context).colorScheme.onSecondary,
              },
            ),
            onChanged: (bool value) => viewModel.changeDarkMode(value),
          ),
        ),
      ],
    );
  }

  Widget _buildUserInfo(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        viewModel.user == null
            ? const CircleAvatar(
                radius: 30,
                backgroundColor: Colors.amber,
                child: Icon(
                  Icons.person,
                  size: 40,
                  color: Colors.black,
                ),
              )
            : CircleAvatar(
                radius: 30,
                backgroundColor: Colors.white,
                child: ClipOval(
                  child: Image.network(
                    'https://pic.pngsucai.com/00/79/67/6dad0fbc7ac29a05.webp',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
        SizedBox(height: 20),
        Text(
          viewModel.user?.nickname ?? AppLocalizations.of(context)!.not_login,
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ],
    );
  }
}
